<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访客登录测试 & 公告</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .response {
            margin-top: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>访客登录测试 & 公告</h1>

    <form id="visitorForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="reason">来访原因:</label>
        <input type="text" id="reason" name="reason" required><br><br>

        <label for="carID">车牌号:</label>
        <input type="text" id="carID" name="carID"><br><br>

        <label for="phonenum">手机号:</label>
        <input type="text" id="phonenum" name="phonenum"><br><br>

        <label for="nameId">身份证号:</label>
        <input type="text" id="nameId" name="nameId"><br><br>

        <label for="requestAt">访问时间:</label>
        <input type="text" id="requestAt" name="requestAt"><br><br>

        <label for="departmentName">所属学院:</label>
        <select id="departmentName" name="departmentName" required>
            <!-- 选项将通过JavaScript动态添加 -->d
        </select><br><br>

        <button type="submit">提交</button>
    </form>

    <div class="response" id="result"></div>

    <div class="response" id="adResponse"></div>
</div>

<script>
    document.getElementById('visitorForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const name = document.getElementById('name').value;
        const reason = document.getElementById('reason').value;
        const carID = document.getElementById('carID').value;
        const phonenum = document.getElementById('phonenum').value;
        const nameId = document.getElementById('nameId').value;
        const requestAt = document.getElementById('requestAt').value;
        const departmentName = document.getElementById('departmentName').value;

        const visitorRequest = {
            name: name,
            carID: carID,
            reason: reason,
            phonenum: phonenum,
            nameId: nameId,
            request_at: requestAt,
            department_name: departmentName
        };

        fetch('/api/visitor', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(visitorRequest)
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerText = '添加成功: ' + JSON.stringify(data);
            })
            .catch(error => {
                document.getElementById('result').innerText = '添加失败: ' + error.message;
            });
    });

    function getAd() {
        fetch('/api/GetAd')
            .then(response => response.json())
            .then(data => {
                const message = data.message || '暂无公告';
                document.getElementById('adResponse').innerText = message;
            })
            .catch(error => {
                document.getElementById('adResponse').innerText = '请求失败: ' + error;
            });
    }

    // 获取学院列表并填充到下拉菜单
    function populateDepartments() {
        fetch('/api/departments/list')
            .then(response => response.json())
            .then(data => {
                const selectElement = document.getElementById('departmentName');
                data.forEach(department => {
                    const option = document.createElement('option');
                    option.value = department.department_name;
                    option.text = department.department_name;// 假设返回的每个部门对象都有一个'name'属性
                    selectElement.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取学院列表失败:', error);
            });
    }

    // 页面加载时自动调用 getAd 和 populateDepartments 函数
    window.onload = () => {
        getAd();
        populateDepartments();
    };
</script>
</body>
</html>
